<template>
	<view class="container">
		<view class="shadow">
			<u-navbar title="评价" :border-bottom="true"></u-navbar>
		</view>
		<view class="card">
			<view class="cu-bar">
				<view class="action sub-title" style="margin: 0;">
					<text class="text-xl text-bold text-red">用户评价</text>
					<text class="bg-red" style="width:2rem"></text>
				</view>
			</view>
			<view class="flex align-center">
				<text class="text-df margin-right-xs">总体评价</text>
				<u-rate
				:count="5" 
				:min-count="1"
				v-model="rate" 
				size="50" 
				inactive-color="#999999"
				active-color="#feda45"></u-rate>
			</view>
			<view class="margin-top margin-bottom comment">
				<u-input v-model="value" type="textarea" placeholder="亲,写下体验能够帮助更多小伙伴哦" :border="true" :height="200" :auto-height="true" />
				<view class="num">
					{{wordlength}}/140
				</view>
			</view>
			<view class="cu-bar bg-white margin-top">
				<view class="action sub-title" style="margin: 0;">
					<text class="text-xl text-bold text-red">照片上传</text>
					<text class="bg-red" style="width:2rem"></text>
				</view>
				<view class="">
					{{imgList.length}}/3
				</view>
			</view>
			<view class="grid col-3 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				 <image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<3">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
			<u-toast ref="uToast" />
			<u-button :type="btntype" @tap="Submit">提交</u-button>
		</view>
		
	</view>
</template>

<script>
export default{
	data(){
		return{
			value:'',//评价内容
			rate:0,//评分
			imgList:[],
		}
	},
	computed:{
		wordlength(){
			return this.value.length
		},
		btntype(){
			if(this.value && this.rate && this.imgList.length){
				return 'error'
			}else{
				return 'default'
			}
		}
	},
	methods:{
		Submit(){
			if(!this.rate){
				this.$refs.uToast.show({
					title: '请先评分',
					type: 'error',
				})
				return;
			}
			if(!this.value){
				this.$refs.uToast.show({
					title: '请填写评价内容',
					type: 'error',
				})
				return;
			}
			if(!this.imgList.length){
				this.$refs.uToast.show({
					title: '请上传照片',
					type: 'error',
				})
				return;
			}
			this.confirm();
		},
		// 确认评价
		confirm(){
			this.$refs.uToast.show({
				title: '成功',
				type: 'success',
			})
		},
		ChooseImage() {
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: (res) => {
					console.log("res",res);
					let arr = res.tempFilePaths;
					// 剩余传几张图，最多三张
					let num = 3 - this.imgList.length;
					if(arr.length>num){
						arr = arr.splice(0,num)
					}
					if (this.imgList.length != 0) {
						this.imgList = this.imgList.concat(arr)
					} else {
						this.imgList = arr
					}
					// if(res.tempFiles.length == 1){
					// 	let file = res.tempFiles[0];
					// 	this.uploadImage(file);
					// }
					// 单文件上传
					if(res.tempFilePaths.length>0){
						if(res.tempFilePaths.length == 1){
							let filepath = res.tempFilePaths[0];
							let file = res.tempFiles[0];
							this.uploadImage(filepath,file);
						}else{
							let files = res.tempFiles;
							this.uploadImages(files);
							// res.tempFilePaths.forEach((item,index)=>{							// 	this.uploadImage(item,res.tempFiles[index])							// })
						}
					}
					
				}
			});
		},
		// 单文件上传
		uploadImage(filepath,file){
			uni.uploadFile({
				url:'/api/file/file/upload', // this.$baseUrl + 仅为示例，非真实的接口地址
				filePath: filepath,
				file:file,
				header:{
					Authorization:uni.getStorageSync('token') || "",
				},
				name: 'file',
				success: (res) => {
					console.log("res.data",JSON.parse(res.data));
					let data = JSON.parse(res.data);
					if(data.code == 200){
						this.$refs.uToast.show({
							title: data.msg,
							type: 'success',
						})
					}else{
						this.$refs.uToast.show({
							title: data.msg,
							type: 'error',
						})
					}
				}
			});
		},
		uploadImages(files){
			uni.uploadFile({
				url:'/api/file/file/upload', //仅为示例，非真实的接口地址
				files:files,
				header:{
					Authorization:uni.getStorageSync('token') || "",
				},
				success: (res) => {
					console.log("res.data",JSON.parse(res.data));
					let data = JSON.parse(res.data);
					if(data.code == 200){
						this.$refs.uToast.show({
							title: data.msg,
							type: 'success',
						})
					}else{
						this.$refs.uToast.show({
							title: data.msg,
							type: 'error',
						})
					}
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '提示',
				content: '确定要删除吗？',
				cancelText: '再看看',
				confirmText: '确认',
				confirmColor:'#e54d42',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1)
					}
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
.comment{
	position: relative;
	.num{
		position: absolute;
		right:20rpx;
		bottom:20rpx;
	}
}
.card{
	width: 96vw;
	border-radius: 10rpx;
	background-color: #fff;
	box-shadow: 0 10rpx 20rpx 4rpx rgba(0,0,0,.1);
	margin: 20rpx auto;
	position: relative;
	box-sizing: border-box;
	padding:10rpx 30rpx 20rpx;
}
</style>
